<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useUserAPI } from "@/services/user";
import { ElMessage } from "element-plus";

const userAPI = useUserAPI();
const router = useRouter();
const loading = ref(false);

const formData = ref({
  username: "",
  email: "",
  password: "",
  confirmPassword: "",
  agreement: false,
});

const errors = ref({
  username: "",
  email: "",
  password: "",
  confirmPassword: "",
  agreement: "",
});

const validateForm = () => {
  let isValid = true;
  errors.value = {
    username: "",
    email: "",
    password: "",
    confirmPassword: "",
    agreement: "",
  };

  // 用户名验证
  if (!formData.value.username) {
    errors.value.username = "请输入用户名";
    isValid = false;
  } else if (
    formData.value.username.length < 3 ||
    formData.value.username.length > 20
  ) {
    errors.value.username = "用户名长度应在3-20个字符之间";
    isValid = false;
  }

  // 邮箱验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!formData.value.email) {
    errors.value.email = "请输入邮箱";
    isValid = false;
  } else if (!emailRegex.test(formData.value.email)) {
    errors.value.email = "请输入正确的邮箱格式";
    isValid = false;
  }

  // 密码验证
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,}$/;
  if (!formData.value.password) {
    errors.value.password = "请输入密码";
    isValid = false;
  } else if (!passwordRegex.test(formData.value.password)) {
    errors.value.password = "密码必须包含大小写字母和数字，且长度不少于6位";
    isValid = false;
  }

  // 确认密码验证
  if (formData.value.password !== formData.value.confirmPassword) {
    errors.value.confirmPassword = "两次输入的密码不一致";
    isValid = false;
  }

  // 协议验证
  if (!formData.value.agreement) {
    errors.value.agreement = "请同意使用条款和隐私政策";
    isValid = false;
  }

  return isValid;
};

const handleSubmit = async () => {
  if (!validateForm()) {
    return;
  }

  try {
    loading.value = true;
    const { username, password, email } = formData.value;
    const result = await userAPI.postRegister(username, password);

    if (result.success) {
      ElMessage.success("注册成功！");
      router.push("/login");
    } else {
      ElMessage.error(result.message || "注册失败，请重试");
    }
  } catch (error: any) {
    ElMessage.error(error.message || "注册失败，请重试");
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <div></div>
  <div class="py-8 px-16 relative">
    <h2 class="text-2xl font-semibold mb-8">创建账户</h2>
    <el-form class="max-w-[400px]" @submit.prevent="handleSubmit">
      <div class="mb-4">
        <label class="block font-medium mb-1">用户名</label>
        <el-input
          size="large"
          v-model="formData.username"
          placeholder="请输入用户名"
        />
        <Transition name="slide-fade">
          <div class="text-red-500 text-sm mt-1" v-if="errors.username">
            {{ errors.username }}
          </div>
        </Transition>
      </div>

      <div class="mb-4">
        <label class="block font-medium mb-1">邮箱</label>
        <el-input
          size="large"
          v-model="formData.email"
          placeholder="请输入邮箱"
        />
        <Transition name="slide-fade">
          <div class="text-red-500 text-sm mt-1" v-if="errors.email">
            {{ errors.email }}
          </div>
        </Transition>
      </div>

      <div class="mb-4">
        <label class="block font-medium mb-1">密码</label>
        <el-input
          size="large"
          v-model="formData.password"
          type="password"
          placeholder="请输入密码"
        />
        <Transition name="slide-fade">
          <div class="text-red-500 text-sm mt-1" v-if="errors.password">
            {{ errors.password }}
          </div>
        </Transition>
      </div>

      <div class="mb-4">
        <label class="block font-medium mb-1">确认密码</label>
        <el-input
          v-model="formData.confirmPassword"
          type="password"
          size="large"
          placeholder="请再次输入密码"
        />
        <Transition name="slide-fade">
          <div class="text-red-500 text-sm mt-1" v-if="errors.confirmPassword">
            {{ errors.confirmPassword }}
          </div>
        </Transition>
      </div>

      <div class="mb-4">
        <el-checkbox v-model="formData.agreement" class="mt-[2px]" />
        &nbsp我同意
        <router-link to="/terms" class="text-sky-700 hover:underline"
          >使用条款</router-link
        >
        和
        <router-link to="/privacy" class="text-sky-700 hover:underline"
          >隐私政策</router-link
        >
        <div class="text-red-500 text-sm mt-1" v-if="errors.agreement">
          {{ errors.agreement }}
        </div>
      </div>

      <el-button
        type="primary"
        size="large"
        @click="handleSubmit"
        :loading="loading"
        :disabled="!formData.agreement"
      >
        <span class="text-sm px-2">
          {{ loading ? "注册中..." : "注册" }}
        </span>
      </el-button>
    </el-form>
    <span class="absolute right-[25vw] top-8 text-3xl font-bold">
      让音乐更美好。<br />
      追踪、寻找和 <br />
      重新发现音乐。
    </span>
    <img
      class="absolute right-[15vw] top-48 text-3xl font-bold"
      src="https://xirealm.oss-cn-beijing.aliyuncs.com/xi/20250606213640.png"
      alt=""
    />
  </div>
</template>

<style scoped>
:deep(.el-form-item__label) {
  font-weight: 500;
  color: black;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-5px);
  opacity: 0;
}
</style>
